<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name=renderer  content=webkit>
    <title>五四宪法历史资料陈列馆</title>
    <link rel="stylesheet" href="/static/css/style.css">
    <link rel="stylesheet" href="/static/layui/layui/css/layui.css"  media="all">
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/common.js"></script>
    <script src="/static/layui/layui/layui.all.js"></script>
</head>
<body>
<form name="order_info" id="order_info" action="/activity_order" method="post">
    <div class="main order_info1">
        <div class="top">
            <a class="back" href="javascript:history.back(-1)"><img src="static/image/left.png" alt="">返回</a>
        </div>
        <div class="order_info container">
            <div class="intro">
                <h1>{$active.description}</h1>
                <p><em>活动地址：</em><span>{$active.addr}</span></p>
                <p style="margin-top: 20px;"><em>活动日期：</em><span>{$active.day}——{$active.endday}</span></p>
                <p style="margin-top: 20px;"><em>活动时间：</em><span>{$active.starttime}-{$active.endtime}</span></p>
            </div>
            <div class="select">
                <div class="s-title">参与时间：</div>
                <img src="/static/image/down_solid.png" alt="">
                <select name="day"  class="hday">
                    {foreach $time as $k=>$val}
                    <option value="{$val}">{$val}</option>
                    {/foreach}
                </select>
            </div>

                <div class="s-title hy" {if $active.sum < 1 } style="display: none;" {/if} >参与人数：</div>
                <input type="text" name="views" title="参与人数" {if $active.sum < 1} style="display: none;" {/if} class="cg_amount_input hy"  >
                {if $active.sum <1}
                <span class="orange">活动已满员,请联系五四宪法历史馆</span>
                {else/}
                <span class="orange">活动名额还剩{$active.sum}位</span>
                {/if}
                <div class="s-title hy" {if $active.sum < 1} style="display: none;" {/if} >预约联系人：</div>
                <input type="text" name="name" title="预约联系人姓名" {if $active.sum < 1} style="display: none;" {/if}  class="w50 hy"  >

            <div  {if $active.sum <1} style="display: none;" {/if} class="hy">
                <div class="select" >
                    <div class="s-title " >省：</div>
                    <img src="/static/image/down_solid.png" alt="">
                    <select name="province" class="province">
                        {foreach $province as $k=>$v}
                        {if $k eq 933}
                        <option value="{$k}" selected>{$v}</option>
                        {else/}
                        <option value="{$k}">{$v}</option>
                        {/if}
                        {/foreach}
                    </select>
                </div>

                <div class="select city1" >
                    <div class="s-title " >市：</div>
                    <img src="/static/image/down_solid.png" alt="">
                    <select name="city" class="city">
                        <option value="934">杭州市</option>
                    </select>
                </div>


                <div class="select country1" style="display:none">
                    <div class="s-title " >区/县：</div>
                    <img src="/static/image/down_solid.png" alt="">
                    <select name="country"  class="country">

                    </select>
                </div>


                <div class="s-title">手机号：</div>
                <input type="text" name="mobile" title="手机号" class="mobile w50">


                <div class="s-title">输入验证码：</div>
                <input type="text" name="code" title="验证码" class="code1 w50">
                <input type="hidden" name="id" value="{$active.id}" class="acid">
                <a href="javascript:;" class="send" onclick="getVerifyCode(this)">发送验证码</a>
                <a href="javascript:;"  class="submit xybb" onclick="checkParse()">确定</a>
            </div>
            </div>
    </div>
</form>
<script>
    //发送验证码
    var countdown = 60;
    function checkParse(event) {
        $('#order_info input').each(function(){
            //参数验证
            var text = $(this).val();
                if(text==""){
                    layer.msg('请填写' + $(this).attr('title') + '!',{icon:2,time:5000});
                    flag = false;
                    event.preventDefault();
          }
        });
        $("#order_info").submit();
    }
    function settime(obj) {
        if (countdown == 0) {
            obj.attr("onclick","getVerifyCode()")//设置onclick属性
            obj.text("获取短信验证码");
            countdown = 60;
            return;
        } else {
            obj.removeAttr("onclick");//移除onclick属性
            obj.text("重新发送(" + countdown + ")");
            countdown--;
        }
        setTimeout(function() {settime(obj) },1000);//设置定时任务，1000毫秒为1秒
    }
    function getVerifyCode(obj) {
        var mobile = $(".mobile").val();
        if(mobile == ""){
            layer.alert("请输入手机号",{
                icon: 2,
                title:false,
                time:5000
            })
            return false;
        }else{
            $.ajax({
                type: 'get',
                url: 'yuyue_code',
                data: {"mobile":$(".mobile").val()},
                dataType:'json',
                success: function (result) {
                    // $(".code1").val(result.code);
                    settime($(".send"));//设置倒计时
                    // alert("发送成功");
                    layer.msg("发送成功",{
                        icon: 1,
                        title:false,
                        time:5000
                    })
                    return false;
                },
                error: function(result){

                },
            });
        }
    }
$(".hday").change(function(){

    $.ajax({
        type: 'get',
        url: '/persionnumber',
        data: {"id":$(".acid").val(),"day":$(this).val()},
        dataType:'json',
        success: function (result) {
           if(result < 1){
               // alert(1);
               $(".hy").css("display",'none')
               $(".orange").text("活动已满员,请联系五四宪法历史馆")
           }else{
               // alert(2);
               $(".hy").css("display",'block')
               $("input.hy").css("display",'inline-block')
               $(".orange").text("活动名额还剩"+result+"位")
           }
        },
        error: function(result){
            // alert("21321");
        },
    });
})

    $(".province").change(function(){
        $(".city1").css("display","block");
        $(".city1").find("option").remove();
        $.ajax({
            type: 'get',
            url: '/province',
            data: {"id":$(".province").val()},
            dataType:'json',
            success: function (result) {
                $.each(result,function(i,val){
                    $(".city").append(
                        '<option  value="'+i+'">' +
                        val+ "</option>")
                });
            },
            error: function(result){
                // alert("21321");
            },
        });
    })


    $(".city").change(function(){
        $(".country1").css("display","block");
        $(".country1").find("option").remove();
        $.ajax({
            type: 'get',
            url: '/city',
            data: {"id":$(".city").val()},
            dataType:'json',
            success: function (result) {
                $.each(result,function(i,val){
                    $(".country").append(
                        '<option  value="'+i+'">' +
                        val+ "</option>")
                });
            },
            error: function(result){
                // alert("21321");
            },
        });
    })

</script>
</body>
</html>